<template>
    <div id="Financial_Top">
        <div>
            <!--        面包屑-->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>代理结算</el-breadcrumb-item>
            </el-breadcrumb>
            <!--        面包屑 end-->
            <!--        内容-->
            <el-card>
                <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small"
                         class="admin_from">
                    <el-form-item label=""
                                  :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-input v-model="searchForm.mch" placeholder="请输入用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label=""
                                  :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-select v-model="searchForm.status" placeholder="请选择类型" clearable
                                   :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                            <el-option label="待处理" value="0"></el-option>
                            <el-option label="同意" value="1"></el-option>
                            <el-option label="拒绝" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-col :span="11">
                            <el-form-item prop="date1">
                                <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.start_time"
                                                value-format="yyyy-MM-dd"
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="date1">
                                <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.end_time"
                                                value-format="yyyy-MM-dd"
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            width="200"
                            prop="created_at"
                            label="款项日期">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="提款金额">
                    </el-table-column>
                    <el-table-column
                            prop="bankname"
                            label="收款人">
                    </el-table-column>
                    <el-table-column
                            prop="bank"
                            label="银行名称">
                    </el-table-column>
                    <el-table-column
                            prop="bankno"
                            label="银行卡号">
                    </el-table-column>
                    <el-table-column
                            prop="female"
                            label="提现状态">
                        <template slot-scope="scope">
                            <el-tag type="warning" v-if="scope.row.status==0">提现中</el-tag>
                            <el-tag v-if="scope.row.status==1">已提现</el-tag>
                            <el-tag type="danger" v-if="scope.row.status==2">已拒绝提现</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="180"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="small" @click="consent(scope.row.id)"
                                       v-if="scope.row.status!='1'">同意提现
                            </el-button>
                            <el-button type="primary" plain size="small" @click="anew(scope.row.id)"
                                       v-if="scope.row.status=='1'">重审
                            </el-button>
                            <el-button type="danger" plain size="small" @click="refuse(scope.row.id)">拒绝提现
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="el-pagination">
                    <el-pagination
                            background
                            @size-change="changeSize"
                            @current-change="changeCurrent"
                            :current-page="params.pagenum"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="params.pagesize"
                            :layout="this.$store.state.paginationLayout"
                            :total="params.totals">
                    </el-pagination>
                </div>

            </el-card>
        </div>
        <el-dialog title="重审" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <el-form ref="form" label-width="80px" size="small">
                <el-form-item label="重审说明">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible=false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "Financial_Top",
    data() {
      return {
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0,
        },
        searchForm: {
          status: '',
          mch: '',
          start_time: '',
          end_time: '',
        },
        tableData: [],
        visible: false,
        imageUrl: '',
        form: {
          remark: '',
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
          status: this.searchForm.status,
          mch: this.searchForm.mch,
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time,
        };
        this.$axios.post("admin/mch_withdraw/index", data).then((res) => {
          this.params.totals = res.data.count;
          this.tableData = res.data.list;
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList();
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList()
      },
      search() {
        this.params.pagenum = 1;
        this.getList();
      },
      consent(id) {
        this.deposit(id, 1)
      },
      refuse(id) {
        this.deposit(id, 2)
      },
      deposit(id, status) {
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post("admin/mch_withdraw/setWithStatus", {id: id, status: status}).then((res) => {
            this.$message.success('成功!');
            this.getList()
          });
        }).catch(() => {

        });
      },
      anew(id) {
        this.visible = true;
        this.id = id;
      },
      dialogAffirm() {
        this.$axios.post("admin/mch_withdraw/reback", {id: this.id, remark: this.form.remark}).then((res) => {
          this.$message.success('成功!');
          this.visible = false;
          this.getList()
        });
      },
    }
  }
</script>

<style scoped>

</style>